<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>实时位置</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.4.3&key=4af5e6fdcaa77c9248d403cd3e965926"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<input type="hidden" value="<fmt:formatDate value="${carInfo.sendTime}" pattern="yyyy-MM-dd HH:mm:ss"/>" id="time" >
<script type="text/javascript">
    var icon = new AMap.Icon({
        image : '${img}',//24px*24px
        //icon可缺省，缺省时为默认的蓝色水滴图标，
        size : new AMap.Size(50,50),
        imageSize :new AMap.Size(50,50)
    });

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [${gpsInfo.longitude}, ${gpsInfo.latitude}],
        zoom: 16
    });

    var time = $("#time").val();
    var infoWindow;
    //构建信息窗体中显示的内容
    var info = [];
    info.push("<div><div>终端名称：${carInfo.name}&nbsp;${carInfo.carNum}</div> ");
    info.push("<div>终端号：${fns:getSim(gpsInfo.simNo)}</div>");
    info.push("<div>sim号：${carInfo.sim}</div>");
    info.push("<div>接收时间："+time+"</div>");
    info.push("<div>速度：${gpsInfo.speed}km/h</div>");
    info.push("<div>方向：${gpsInfo.direction}</div>");
    info.push("<div>位置：${gpsInfo.location}</div></div>");
    infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(10, -35),
        content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
    });



    var marker1 = new AMap.Marker({
        position: map.getCenter(),
        icon:icon
    });
    marker1.setMap(map);
    marker1.setAngle(${gpsInfo.directionNum});
    infoWindow.open(map, marker1.getPosition());

    window.setInterval("refresh()",30000);

    function refresh(){
        $.get("${ctxFront}/gps/ajaxMap?id=${carInfo.id}", function(data){
            if(data.code == 200){



                var map = new AMap.Map('container', {
                    resizeEnable: true,
                    center: [data.gpsInfo.longitude,data.gpsInfo.latitude],
                    zoom: 16
                });

                var time = $("#time").val();
                var infoWindow;
                //构建信息窗体中显示的内容
                var info = [];
                info.push("<div><div>终端名称："+data.carInfo.name+"&nbsp;"+data.carInfo.carNum+"</div> ");
                info.push("<div>终端号："+data.gpsInfo.simNo+"</div>");
                info.push("<div>sim号："+data.carInfo.sim+"</div>");
                info.push("<div>接收时间："+data.carInfo.sendTime+"</div>");
                info.push("<div>速度："+data.gpsInfo.speed+"km/h</div>");
                info.push("<div>方向："+data.gpsInfo.direction+"</div>");
                info.push("<div>位置："+data.gpsInfo.location+"</div></div>");
                infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(10, -35),
                    content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
                });
                var marker = new AMap.Marker({
                    position: map.getCenter(),
                    icon: icon
                });
                marker.setMap(map);
                console.log(data.gpsInfo.directionNum)
                marker.setAngle(parseInt(data.gpsInfo.directionNum));
                infoWindow.open(map, marker.getPosition());
            }
        });
    }



</script>
</body>
</html>